<template>
  <ul class="nav-tab">
    <li
      class="tab-item"
      v-for="(item, index) in tabs"
      :key="index"
      :class="{ active: activeName == item.value }"
      :style="item.style"
      @click="handleTabChange(item)"
    >
      {{ item.label }}
    </li>
  </ul>
</template>

<script setup lang="ts">
const props = defineProps<{
  tabs: any;
}>();

const activeName = defineModel();
const handleTabChange = (item) => {
  activeName.value = item.value;
};

onMounted(()=> {
  if(!activeName.value) activeName.value = props.tabs[0].value
})
</script>

<style scoped lang="scss">
.nav-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  color: #f2f6ff;
  box-shadow: 1px 2px 3px 0 rgba(12, 47, 60, 0.15);
  > .active {
    opacity: 1 !important;
  }
  > .tab-item {
    position: relative;
    min-height: 33px;
    line-height: 33px;
    padding: 0 4px;
    opacity: 0.4;
    &:hover {
      cursor: pointer;
    }
    &::after {
      content: "";
      width: 100%;
      height: 100%;
      background: #0000 url("@/assets/nx/button.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      bottom: 0px;
      left: 0;
      z-index: -1;
    }
  }
}
</style>
